<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用户登陆</title>
    <script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
	
	<style type="text/css">
	
	body{
		background-image: url(img/5.jpg);      
   	 	background-size:cover;  
	}

.form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}
/*阴影*/
.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
input[type="text"],input[type="password"]{padding-left:26px;}
.checkbox{padding-left:21px;}
	</style>
  </head>
  
  <body>
  <form action="<%=path%>/LoginServlet" method="post">
    <div class="container">
        <div class="form row">
            <div class="form-horizontal col-md-offset-3" id="login_form">
            	<c:if test="${not empty errorInfo}">
            		<h3 class="glyphicon glyphicon-flash form-title" style="color: rgb(255, 140, 60);">${errorInfo}</h3>
            	</c:if>
            	<c:if test="${empty errorInfo}">
            		<h3 class="glyphicon glyphicon-user" style="color: rgb(243, 146, 97);">学生考勤系统</h3>
            	</c:if>
                <div class="col-md-9">
                    <div class="form-group">
                        <i class="fa fa-user fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="用户名" id="username" name="userId" autofocus="autofocus" maxlength="20"/>
                    </div>
                    <div class="form-group">
                            <i class="fa fa-lock fa-lg"></i>
                            <input class="form-control required" type="password" placeholder="密码" id="password" name="password" maxlength="16"/>
                    </div>
                    <div class="radio">
                        <label>
                        	<input type="radio" class="radio" name="roleType" value="User"> 管理员
                        </label>
                        <label>
                        	<input type="radio" class="radio"name="roleType" value="Teacher">教师
                        </label>
                        <label>
                        	<input type="radio" class="radio"name="roleType" value="Student">学生
                        </label>
                   </div>
                    <div class="form-group col-md-offset-9">
                        <button type="submit" class="btn btn-success pull-right" name="submit">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="bootstrap/js/bootstrap.js"></script>
  </body>
</html>
